<template>
  <div>

    <el-row>
      <el-col>
        <el-input :rows="20" v-model="log" type="textarea"></el-input>
      </el-col>
    </el-row>
    <el-row v-for="(sq,id) in sqls" :key="id">
      <sql :content="sq"/>
    </el-row>
  </div>
</template>

<script>
import Sql from "./components/Sql";
import { splitSql } from "./sql";

export default {
  name: 'App',
  components: {
    Sql
  },

  mounted(){
    if(location.hash){
      this.log = decodeURIComponent(location.hash);
    }
  },

  watch:{

    log(newVal){
      if(newVal)
        location.hash = encodeURIComponent(newVal);
      this.sqls = splitSql(newVal);
    }
  },

  data(){
    return {
      sqls:[],
      log:''
    }
  }
}
</script>

<style>
body {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
</style>
